<meta charset="utf-8"/> <!-- 设置编码方式 -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../ExternalLibrary/js/vue.js"></script>

<!-------------------------------vue第一个组件start ------------------------------->
<fieldset>
	<legend>01.vue组件(在vue眼中组件必须是可视的)</legend><!-- 如果js写成组件,还不如将js写成一个类供大家使用方便 -->
	<div id="firstCom">
		<syg-component></syg-component>
	</div>
	<script type="text/javascript">
		/* 组件两种命名方式
			1,kebab-case (短横线分隔命名) 
			2,PascalCase (首字母大写命名,此时引用这个自定义元素时两种命名法都可以使用) 
		 */
		Vue.component('syg-component',{
			template:'<span>第一个vue组件</span>'/* template中的内容会渲染以后输出 */
		})

		//1,为什么要在这里创建对象？
		//因为Vue.component()定义的组件相当于全局的,需要将全局的组件挂载到vue的具体实例上,vue不会自动挂载。
		//2,为什么组件定义为全局的？
		//因为组件要达到复用,只能定义为全局的
		var oCom = new Vue({
			el:"#firstCom"
		})
	</script>
</fieldset>
<!------------------------------- vue第一个组件end  ------------------------------->

<!-------------------------------vue第二个组件start ------------------------------->
<fieldset>
	<legend>02.vue组件</legend>
	<ol id="vueId">
		<syg-guang v-for="item in goodsList"></syg-guang><!-- 标签与component中的第一个元素对应 -->
	</ol>

	<script type="text/javascript">
		Vue.component('syg-guang',{
			template:'<li>这是一个待办项</li>'
		})

		//为什么要new一个对象出来？
		//因为Vue.component()定义的组件相当于全局的,需要将全局的组件挂载到vue的具体实例上,vue不会自动挂载。
		var vueObj = new Vue({
			el:"#vueId",
			data:{
				//为什么这个list没有改变？？？
				goodsList:[
					"value1",
					"value2",
					"value3"
				]

			}
		});
	</script>
</fieldset>
<!------------------------------- vue第二个组件end  ------------------------------->

<!-------------------------------vue第三个组件start ------------------------------->
<fieldset>
	<legend>03.vue组件</legend>
	<div id="componentID">
		<ol>
			<todo-item
				v-for="syg in goodsMap"
				v-bind:todo="syg"
			></todo-item>
		</ol>
	</div>
	<script type="text/javascript">
		Vue.component('todo-item',{
			props:['todo'],//与v-bind:todo对应,与template中的todo对应
			template:'<li>{{todo.value}}</li>'
		});

		var vueObj = new Vue({
			el:"#componentID",
			data:{
				goodsMap:[
					{value:"apple"},
					{value:"banana"},
					{value:"orange"}
				]
			}
		})
	</script>
</fieldset>
<!------------------------------- vue第三个组件end  ------------------------------->

<!-------------------------------vue第四个组件start ------------------------------->
<fieldset>
	<legend>04.vue组件</legend>
	<div id="keyId">
		<ol>
			<todo-item
				v-for="syg in foods"
				v-bind:todo="syg"
				v-bind:key="syg.id"
			></todo-item>
		</ol>
	</div>
	<script type="text/javascript">
		Vue.component("todo-item",{
			props:["todo"],//与v-bind:todo对应,与template中的todo对应
			template:"<li>{{todo.text}}</li>"
		});

		var oVue = new Vue({
			el:"#keyId",
			data:{
				foods:[
					{id:"A",text:"tomato"},
					{id:"B",text:"potato"},
					{id:"C",text:"cucumber"},
				]
			}
		})
	</script>
</fieldset>
<!-------------------------------vue第四个组件end ------------------------------->
<!-------------------------------vue第五个组件start ------------------------------->
<fieldset>
	<legend>05.vue计算</legend>
	<div id="components-demo">
		<button-counter></button-counter>
	</div>
	<script type="text/javascript">
		Vue.component('button-counter', {
			data: function () {
				return {
				count: 0
				}
			},
			// 这个不懂？官网上有解释
			template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
		})

		new Vue({ el: '#components-demo' })
	</script>
</fieldset>
<!-------------------------------vue第五个组件end ------------------------------->

<fieldset>
	<legend>06.全局组件与局部组件</legend>
	<div id="whole_component">
		<component-a></component-a>
		<component-b></component-b>
		<component-c></component-c>
		<!-- 两种接收组件方式的区别 -->
		<component-a/>
		<component-b/>
		<component-c/>
	</div>
	<script>
		// 这种方式是全局注册,每个vue实例上都有
		Vue.component('component-a',{
			template:"<div>全局组件1</div>"
		})

		Vue.component('component-b',{
			template:"<div>全局组件2</div>"
		})

		Vue.component('component-c',{
			template:"<div>全局组件3</div>"
		})

		new Vue({
			el:'#whole_component'
		});
	</script>

	<!-- 定义局部组件 -->

	<div id="part_component">
		<part-component-a></part-component-a>
		<part-component-b></part-component-b>
	</div>
	<script>
		let componentA={
			template:'<div>局部组件1</div>'
		}
		let componentB={
			template:'<div>局部组件2</div>'
		}

		// 局部组件需要在vue实例中声明才可以使用
		new Vue({
			el:"#part_component",
			components:{
				// 对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。
				'part-component-a':componentA,
				'part-component-b':componentB
			}
		})

		//注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：
		// var ComponentA = { /* ... */ }
		// var ComponentB = {
		// 	components: {
		// 		'component-a': ComponentA
		// 	},
		// 	// ...
		// }
	</script>
</fieldset>